<template>
    <bread></bread>
    <a-card class="general-card" title="筛选条件">
        <!-- 查询条件 -->
        <a-row>
            <a-col :flex="1">
                <a-form ref="paramForm" :model="paramModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                    label-align="left">
                    <a-row :gutter="12">
                        <a-col :span="6">
                            <a-form-item field="keyword" label="关键词">
                                <a-input v-model="paramModel.keyword" @press-enter="doRefresh" placeholder="输入关键词查询" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item field="status" label="平台" allow-clear>
                                <a-select v-model="grouping" placeholder="全部" @change="doRefresh">
                                    <a-option value="platform">管理后台</a-option>
                                    <a-option value="api">客户端小程序</a-option>
                                    <a-option value="mch">商户端APP</a-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-col>
            <a-divider style="height: 36px" direction="vertical" />
            <a-col :flex="'86px'" style="text-align: right">
                <a-space direction="horizontal" :size="18">
                    <a-button type="primary" @click="doRefresh">
                        <template #icon>
                            <icon-search />
                        </template>
                        查询
                    </a-button>
                    <a-button @click="resetParamForm">
                        <template #icon><icon-refresh /></template>
                        重置
                    </a-button>
                </a-space>
            </a-col>
        </a-row>
        <!-- 操作按钮 -->
        <a-divider style="margin-top: 0" />
        <a-row style="margin-bottom: 16px">
            <a-col :span="20">
                <common-page-btn @save="addForm()"></common-page-btn>
            </a-col>
            <a-col :span="4" style="display: flex; align-items: center; justify-content: end">
                <a-button-group>
                    <a-tooltip content="刷新">
                        <a-button @click="doRefresh()"><icon-refresh size="18" /></a-button>
                    </a-tooltip>
                    <a-dropdown @select="handleSelectDensity">
                        <a-tooltip content="密度">
                            <a-button><icon-line-height size="18" /></a-button>
                        </a-tooltip>
                        <template #content>
                            <a-doption v-for="item in densityList" :key="item.value" :value="item.value"
                                :class="{ active: item.value === size }">
                                <span>{{ item.name }}</span>
                            </a-doption>
                        </template>
                    </a-dropdown>
                </a-button-group>
            </a-col>
        </a-row>
        <!-- 数据列表 -->
        <a-table row-key="menuId" :data="data" :bordered="false" :pagination="false" :size="size" :columns="columns"
            :loading="loading" @expand="expand" :expandedRowKeys="expandedRowKeys">
            <!--名称-->
            <template #name="{ record }">
                <template v-if="record.icon">
                    <a-icon :type="record.icon" />
                </template>
                {{ record.name }}
            </template>
            <!--菜单-->
            <template #is_menu="{ record }">
                <template v-if="record.isMenu == 1">
                    <icon-check-circle style="color:#090" />
                </template>
                <template v-else>
                    <icon-stop></icon-stop>
                </template>
            </template>
            <!--按钮-->
            <template #is_button="{ record }">
                <template v-if="record.isButton == 1">
                    <icon-check-circle style="color:#090" />
                </template>
                <template v-else>
                    <icon-stop></icon-stop>
                </template>
            </template>
            <!--状态-->
            <template #is_show="{ record }">
                <template v-if="record.isShow == 1">
                    <icon-check-circle style="color:#090" />
                </template>
                <template v-else>
                    <icon-stop></icon-stop>
                </template>
            </template>
            <!--排序-->
            <template #sort="{ record }">
                <a-input-number :min="0" size="small" :value="record.sort"></a-input-number>
            </template>
            <!--操作-->
            <template #action="{ record }" v-has-or="'admin:save|admin:del'">
                <a-button-group shape="circle" size="small">
                    <a-tooltip content="编辑">
                        <a-button shape="circle" type="text" v-has="'menu:save'" @click="addForm(record)">
                            <icon-edit />
                        </a-button>
                    </a-tooltip>
                    <a-tooltip content="添加子菜单">
                        <a-button shape="circle" type="text" v-has="'menu:save'" @click="addForms(record)">
                            <icon-plus-circle />
                        </a-button>
                    </a-tooltip>
                    <a-tooltip content="删除">
                        <a-button shape="circle" type="text" status="danger" v-has="'menu:del'" @click="removeItem(record)">
                            <icon-delete />
                        </a-button>
                    </a-tooltip>

                </a-button-group>
            </template>
        </a-table>
        <!-- 分页 -->
        <!-- <a-row justify="center">
            <a-col :span="12" :offset="6" style="padding: 20px 0;">
                <a-pagination :defaultPageSize="paramModel.limit" :total="data.total" @change="doNext"
                    @page-size-change="setLimit" show-page-size :current="data.current" show-total
                    hide-on-single-page />
            </a-col>
        </a-row> -->

    </a-card>

    <!-- <AdminForm ref="adminForm" @success="doRefresh"></AdminForm> -->
    <!-- <ro-from ref="Form" @success="doRefresh"></ro-from>
    <ro-auth ref="Auth"></ro-auth> -->
    <menu-add ref="form" :pid="pid" :form="row" :group="grouping" :menuList="data" @success="doRefresh"></menu-add>
</template>

<script lang="ts" setup>
import request from "@/config/request";
import utils from "@/utils/utils";
import { ref, toRefs, reactive } from "@vue/reactivity";
import { computed, onMounted, watch } from "vue";
import menuAdd from './components/menuAdd.vue'



//添加表单
const form = ref();
const addForm = (data?: any) => {
    row.value = data ? data : null;
    form.value.show();
}
const addForms = (data?: any) => {
    row.value = null;
    pid.value = data.menuId;
    form.value.show();
}
//删除
const removeItem = (data: any) => {
    utils.confirm("您确认要删除吗?").then(() => {
        utils.loading();
        request.delete("/platform/menu/del/" + data.menuId, null).then(res => {
            utils.success('删除成功');
            doRefresh();
        })
    })
}
//展开某行
const expandedRowKeys = ref([]);
const expand = (expanded: any, record: any) => {
    // 只展开一行
    if (expandedRowKeys.value.length > 0) {
        let index = expandedRowKeys.value.indexOf(record as never);
        if (index > -1) {
            expandedRowKeys.value.splice(index, 1);
        } else {
            expandedRowKeys.value.splice(0, expandedRowKeys.value.length);
            expandedRowKeys.value.push(record as never);
        }
    } else {
        expandedRowKeys.value.push(record as never);
    }
}
/**
 * 查询参数
 */
const paramModel = ref({
    page: ref(1),
    limit: ref(20),
    keyword: ref(""),
    date: ref(),
    startDate: ref(),
    endDate: ref(),
    status: ref()
});
/**
 * 列数据
 */
const columns = computed<any>(() => [
    { title: "菜单名称", slotName: 'name', align: 'left', tree: true },
    // {title: 'ID', dataIndex: "menuId", width: 100, align: 'center'},
    { title: "路径", dataIndex: "path", align: 'left' },
    { title: "权限", dataIndex: "authorize", align: 'left' },
    // {title: "排序", scopedSlots: { customRender: 'sort' }, align: 'center'},
    { title: "菜单", slotName: 'is_menu', align: 'center', width: 80 },
    { title: "按钮", slotName: 'is_button', align: 'center', width: 80 },
    { title: "显示", slotName: 'is_show', align: 'center', width: 80 },
    { title: "操作", slotName: 'action', align: "center", width: 160 }
])


const row = ref();
const grouping = ref("platform");
const pid = ref(0);
/**
 * 以下参数每个页面都一样
 */
const loading = ref(false);
const size = ref();
const paramForm = ref();
const dateMode = ref('date');
const dateRange = ref([]);
const densityList = computed(() => [
    { name: '迷你', value: 'mini', },
    { name: '偏小', value: 'small', },
    { name: '中等', value: 'medium', },
    { name: '偏大', value: 'large' },
]);
const handleSelectDensity = (
    val: string | number | Record<string, any> | undefined,
    e: Event
) => {
    size.value = val;
};
//重置查询条件
const resetParamForm = () => {
    paramForm.value.resetFields();
    dateRange.value = [];
}

/**
 * 时间单位变化
 */
watch(dateRange, (v, o) => {
    if (v) {
        paramModel.value.startDate = v[0];
        paramModel.value.endDate = v[1];
    } else {
        paramModel.value.startDate = '';
        paramModel.value.endDate = '';
    }
})

onMounted(() => {
    doRefresh();
})
const data = ref([]);
/**
 * table数据
 */
const doRefresh = () => {
    loading.value = true;
    request.get("/platform/menu/list", { group: grouping.value, parentId: 0 }).then(ret => {
        data.value = ret.data;
    }).finally(() => {
        loading.value = false;
    })
}

const doNext = (page: any) => {
    paramModel.value.page = page;
    doRefresh();
}
const setLimit = (size: number) => {
    paramModel.value.limit = size;
    paramModel.value.page = 1;
    doRefresh();
}



</script>

<style lang="less"></style>